<template>
  <div>
    <el-form :model="questionForm" ref="questionRef">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" label-width="80px">
            <el-select
              placeholder="请选择"
              @focus="getSub"
              v-model="questionForm.subjectID"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" label-width="80px">
            <el-select
              placeholder="请选择"
              v-model="questionForm.catalogID"
              @focus="getDiff"
            >
              <el-option
                v-for="item in catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" label-width="80px">
            <el-select
              placeholder="请选择"
              v-model="questionForm.tags"
              @focus="getTag"
            >
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" label-width="80px">
            <el-input
              style="width: 200px"
              v-model="questionForm.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型" label-width="80px">
            <el-select placeholder="请选择" v-model="questionForm.questionType">
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" label-width="80px">
            <el-select placeholder="请选择" v-model="questionForm.difficulty">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" label-width="80px">
            <el-select placeholder="请选择" v-model="questionForm.direction">
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" label-width="80px">
            <el-select
              placeholder="请选择"
              v-model="questionForm.creatorID"
              @focus="getUser"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注" label-width="80px">
            <el-select placeholder="请选择" v-model="questionForm.remarks" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" label-width="80px">
            <el-input
              placeholder="请选择"
              v-model="questionForm.shortName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" label-width="80px">
            <el-select
              placeholder="请选择"
              v-model="questionForm.province"
              style="width: 100px; margin-right: 10px"
              @focus="getProv"
            >
              <el-option
                v-for="item in provList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              v-model="questionForm.city"
              style="width: 100px"
              @focus="getCity"
            >
              <el-option
                v-for="item in cityList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="display: flex; justify-content: end">
          <el-button size="small" @click="clearFn">清除</el-button>
          <el-button type="primary" size="small" @click="searchFn"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { simple } from '../../api/hmmm/subjects'
import { list as disList } from '../../api/hmmm/directorys'
import { list as tagList } from '../../api/hmmm/tags'
import { list as userList } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'
export default {
  data () {
    return {
      questionForm: {
        subjectID: null,
        catalogID: null,
        difficulty: null,
        tags: null,
        keyword: null,
        questionType: null,
        direction: null,
        creatorID: null,
        remarks: null,
        city: null,
        province: null,
        shortName: null,
        publishState: null
      },
      subjectList: [],
      catalogList: [],
      tagsList: [],
      userList: [],
      provList: [],
      cityList: [],
      changeForm: 0,
      questionType, // 试题类型
      difficulty, // 试题难度
      direction // 方向
    }
  },
  updated () {
    this.$emit('getChoice', this.questionForm)
  },
  methods: {
    // 搜索
    searchFn () {
      if (this.questionForm.catalogID) {
        this.questionForm.catalogID = Number(this.questionForm.catalogID)
      }
      if (this.questionForm.subjectID) {
        this.questionForm.subjectID = Number(this.questionForm.subjectID)
      }
      this.$emit('searchChoice', this.questionForm)
    },
    // 清空
    async clearFn () {
      this.$refs.questionRef.resetFields()
      this.questionForm = {
        subjectID: null,
        catalogID: null,
        difficulty: null,
        tags: null,
        keyword: null,
        questionType: null,
        direction: null,
        creatorID: null,
        remarks: null,
        city: null,
        province: null,
        shortName: null,
        publishState: null
      }
    },
    // 学科
    async getSub () {
      const { data } = await simple()
      console.log(data)
      this.subjectList = data
    },
    // 目录
    async getDiff () {
      if (this.questionForm.subjectID.length !== 0) {
        const { data } = await disList(this.questionForm)
        console.log(data)
        this.catalogList = data.items
      } else {
        this.catalogList = []
      }
    },
    // 标签
    async getTag () {
      if (this.questionForm.subjectID.length !== 0) {
        const { data } = await tagList(this.questionForm)
        console.log(data)
        this.tagsList = data.items
      } else {
        this.tagsList = []
      }
    },
    // 录入人
    async getUser () {
      const { data } = await userList()
      console.log(data)
      this.userList = data.list
    },
    // 城市
    getProv () {
      this.provList = provinces()
    },
    // 省份
    getCity () {
      if (this.questionForm.province !== 0) {
        this.cityList = citys(this.questionForm.province)
      } else {
        this.cityList = []
      }
    }
  }
}
</script>

<style></style>
